export const addChatComponent = (editor) => {
    const { Components } = editor;

    Components.addType('chat', {
        model: {
            defaults: {
                tagName: 'div',
                attributes: { class: 'chat-container' },
                resizable: true, // 允许调整大小
             
                components: [
                    {
                        type: 'text',
                        content: '聊天互动',
                        attributes: { class: 'chat-title' },
                    },
                    {
                        type: 'div',
                        attributes: { class: 'chat-messages' },
                        components: [
                            {
                                type: 'div',
                                attributes: { class: 'chat-message' },
                                
                                components: [
                                    {
                                        type: 'div',
                                        draggable: false,
                                        attributes: { class: 'chat-avatar' },
                                    },
                                    {
                                        type: 'div',
                                        draggable: false,
                                        attributes: { class: 'chat-content' },
                                        components: [
                                            {
                                                type: 'text',
                                                content: '张龙',
                                                draggable: false,
                                                attributes: { class: 'chat-author' },
                                            },
                                            {
                                                type: 'text',
                                                content: '说得对',
                                                draggable: false,
                                                attributes: { class: 'chat-text' },
                                            }
                                        ]
                                    }
                                ]
                            }
                        ]
                    },
                    {
                        type: 'div',
                        attributes: { class: 'chat-login-prompt' },
                        draggable: true, 
                        droppable: false, 
                        components: [
                            {
                                type: 'link',
                                content: '登录',
                                draggable: false,
                                attributes: { class: 'login-line' },
                            },
                            {
                                type: 'text',
                                draggable: false,
                                content: '后可参与直播互动',
                            }
                        ]
                    }
                ],
                styles: `
                    .chat-container {
                        padding: 20px;
                        border: 1px solid #ddd;
                        background-color: #f9f9f9;
                        border-radius: 8px;
                        width: 350px;
                        margin: 0 auto;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        height: 500px; 
                    }
                    .chat-title {
                        font-size: 24px;
                        margin-bottom: 20px;
                        text-align: center;
                        font-weight: bold;
                    }
                    .chat-messages {
                        max-height: 300px;
                        overflow-y: auto;
                        margin-bottom: 20px;
                        flex-grow: 1;
                    }
                    .chat-message {
                        display: flex;
                        align-items: center;
                        margin-bottom: 10px;
                    }
                    .chat-avatar {
                        width: 40px;
                        height: 40px;
                        background-color: #ddd;
                        border-radius: 50%;
                        margin-right: 10px;
                    }
                    .chat-content {
                        max-width: 80%;
                    }
                    .chat-author {
                    font-size: 12px;
                    }
                    .chat-text {
                    border-radius: 12px;
                    background-color: #e9f7fe;
                    padding: 10px;
                    font-size: 14px;
                    }
                    .chat-login-prompt {
                        display: flex;
                        justify-content: center;
                        text-align: center;
                        cursor: pointer;
                        margin-top: 20px;
                        margin-bottom: 0;
                    }
                    .login-line {
                        color: #007bff;
                    }
                `,
            }
        }
    });

    editor.BlockManager.add('chat', {
        label: '聊天互动组件',
        category: '组件类',
        content: { type: 'chat' },
        media:`<svg xmlns="http://www.w3.org/2000/svg" height="30" width="30" viewBox="0 0 640 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M208 352c114.9 0 208-78.8 208-176S322.9 0 208 0S0 78.8 0 176c0 38.6 14.7 74.3 39.6 103.4c-3.5 9.4-8.7 17.7-14.2 24.7c-4.8 6.2-9.7 11-13.3 14.3c-1.8 1.6-3.3 2.9-4.3 3.7c-.5 .4-.9 .7-1.1 .8l-.2 .2 0 0 0 0C1 327.2-1.4 334.4 .8 340.9S9.1 352 16 352c21.8 0 43.8-5.6 62.1-12.5c9.2-3.5 17.8-7.4 25.3-11.4C134.1 343.3 169.8 352 208 352zM448 176c0 112.3-99.1 196.9-216.5 207C255.8 457.4 336.4 512 432 512c38.2 0 73.9-8.7 104.7-23.9c7.5 4 16 7.9 25.2 11.4c18.3 6.9 40.3 12.5 62.1 12.5c6.9 0 13.1-4.5 15.2-11.1c2.1-6.6-.2-13.8-5.8-17.9l0 0 0 0-.2-.2c-.2-.2-.6-.4-1.1-.8c-1-.8-2.5-2-4.3-3.7c-3.6-3.3-8.5-8.1-13.3-14.3c-5.5-7-10.7-15.4-14.2-24.7c24.9-29 39.6-64.7 39.6-103.4c0-92.8-84.9-168.9-192.6-175.5c.4 5.1 .6 10.3 .6 15.5z"/></svg>`
    });
};
